<template>
  <div class="message-container">
    <div class="messageTip" v-if="data.type === 3">{{data.content}}</div>
    <div v-else :class="`message-wrap ${data.from === friend.id ? 'message-wrap_recipient' : 'message-wrap_sender'}`">
      <div class="message-box">
        <div class="details">
          <span class="nickname">{{data.from === friend.id ? friend.nickName : friend.accountName}}</span>
          <span class="time">{{ data.createTimeAt }}</span>
        </div>

        <div class="content margin_t-10">
          <span class="contentTxt" v-if="data.type === 1">{{data.content}}</span>
          <el-image
            v-else-if="data.type === 2"
            style="width: 100px;" fit="cover"
            :src="data.content"
            :preview-src-list="[data.content]" />
          <div>
            <div class="saveUserInfoBox" v-if="data.content == '17683752427' ">
              <div><el-icon><Iphone /></el-icon> 复制并保存为客资</div>
            </div>
          </div>

          <div class="loading-icon-box" v-show="data.loading">
            <el-icon class="loading-icon"><loading /></el-icon>
          </div>
        </div>

        <div class="content margin_t-10 type4Box" v-if="data.type === 4">
          <div class="type4Info">
            <div> {{data.from === friend.id ? "用户评论:" : "你回复了:"}}</div>
            <div>{{data.content}}</div>
            <div class="videoBox">
              <el-image style="width: 60px;" fit="cover" src="https://entertain.cdn.inwuoo.com/image/2023/11/13/aa4daccf-3e97-4900-b669-4c7767069f2b_169985764186572-362.jpg"></el-image>
              <div class="videoRight">
                <div>{{data.dyTitle}}</div>
                <div style="color: #5cadff">查看视频</div>
                <div>2024-05-16 18:19:55</div>
              </div>
            </div>
          </div>
          <div class="type4Tip">
            <span>评论</span>
            <span style="color: #5cadff" v-if="data.from === friend.id">回复此条</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, computed, reactive} from 'vue'
import {useStore} from "vuex"
import {formatDate} from "@/utils/d_times"
const store = useStore()

const props = defineProps({
  data:{
    type: Object,
    default: () => ({})
  }
})
const friend = computed(() => store.state.conversation.active)
</script>

<style lang="scss" scoped>
@import '@/assets/sass/_variable.scss';
.messageTip {
  font-size: 12px;
  width: 100%;
  text-align: center;
  color: #969696;
}
.saveUserInfoBox {
  display: flex;
  margin-top: 20px;
  &>div {
    cursor: pointer;
    font-size: 12px;
    padding: 8px 5px;
    color: #0084e7;
    border: 1px solid #0084e7;
    border-radius: 4px;
    margin-left: 5px;
  }
}
.message-container {
  .message-wrap {
    display: flex;
    &_recipient {
      flex-direction: row;
      .message-box {
        margin-left: 10px;
        .details {
          flex-direction: row;
          margin-bottom: 10px;
          .nickname {
            margin-right: 10px;
          }
        }
        .content {
          flex-direction: row;
          position: relative;
          .contentTxt {
            background: #e1e8eb;
            color: #969696;
          }
        }
        .type4Box {
          .type4Info {
            background: #e1e8eb;
            color: #969696;
          }
        }
      }
    }
    &_sender {
      flex-direction: row-reverse;
      .message-box {
        margin-right: 10px;
        .details {
          margin-bottom: 10px;
          flex-direction: row-reverse;
          .nickname {
            margin-left: 10px;
          }
        }
        .content {
          flex-direction: row-reverse;
          .loading-icon-box {
            position: relative;
            .loading-icon {
              position: absolute;
              top: 50%;
              right: 5px;
              transform: translateY(-50%);
            }
          }
          .contentTxt {
            background: #0084e7;
            color: #fff;
          }
        }
        .type4Box {
          .type4Info {
            background: #0084e7;
            color: #fff;
          }
        }

      }

    }
    .message-box {
      flex: 1;
      .details {
        display: flex;
        font-size: 12px;
        .nickname {
          color: $darkColor-9;
        }
        .time {
          color: $darkColor-6;
        }
      }
      .content {
        display: flex;
        span {
          position: relative;
          padding: 10px;
          font-size: 12px;
          line-height: 20px;
          text-align: left;
          border-radius: 4px;
          max-width: 50%;
        }
      }
      .type4Box{
        display: flex;
        align-items: center;
        .type4Info {
          display: flex;
          flex-direction: column;
          font-size: 12px;
          padding: 10px;
          border-radius: 10px;
          max-width: 70%;
          &>div{
            margin: 2px 0;
          }
          .videoBox {
            padding: 10px;
            display: flex;
            background: #fff;
            border-radius: 2px;
            .el-image{
              object-fit: cover;
            }
          }
          .videoRight {
            flex: 1;
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: black;
          }
        }
        .type4Tip {
          &>.contentTxt {
            color: $darkColor-9;
            background: #ffffff;
          }
        }
      }

    }

  }
}
</style>
